<template>
	<view class="rider_order_statistics">
        <div class="order_statistics_cont">
            <div class="select_box">
                    <div class="select_item">
                        <uni-datetime-picker 
                            type="date"    
                            @change="dateChange"
                        >
                            {{currentSelectDate.text}}
                            <uni-icons type="bottom" size="15" class="bottom_icon"></uni-icons>
                        </uni-datetime-picker>
                    </div>
            </div>
            <div class="order_amount_container">
                <div class="item_box">
                    <div class="order_amount">
                        {{ headStatistics.completeCount }}
                        <div class="order_amount_text">单</div>
                    </div>
                    <div class="order_desc_title">
                        完成订单
                    </div>
                </div>
                <div class="item_box">
                    <div class="order_amount">
                        {{ headStatistics.cancelCount }}
                        <div class="order_amount_text">单</div>
                    </div>
                    <div class="order_desc_title">
                        取消订单
                    </div>
                </div>
                <div class="item_box">
                    <div class="order_amount">
                        {{ headStatistics.turnCount }}
                        <div class="order_amount_text">单</div>
                    </div>
                    <div class="order_desc_title">
                        转单订单
                    </div>
                </div>
            </div>

            <div class="today_order_list">
                <div class="today_order_title flex flexColumn">
                    <div class="today_order_text">
                        订单明细
                    </div>
                    <div class="order_type_list">
                        <div 
                            class="item_type"
                            :class="{'active':item.checked}" 
                            v-for="(item,index) in typeItemList" 
                            :key="item.value"
                            @click="typeItemChange(index)"
                        >
                            {{ item.name }}
                        </div>
                    </div>
                </div>
                <div class="order_list_box">
                    <div 
                        class="item" 
                        v-for="(item,index) in typeItemList[checkedIndex].dataList" 
                        :key="index"
                        @click="goToOtherPage(`/riderUser/pages/order-details/order-details`,{
                            orderId:item.order_id
                        })"
                    >
                        <div class="it_title income">
                            <div class="income_type_box flex flexAlignItems">
                                <div 
                                    class="income_type" 
                                    :style="orderStatusToggle[item.current_rider_order_status].style"
                                >
                                    {{ orderStatusToggle[item.current_rider_order_status].text }}
                                </div>

                                <div 
                                    class="income_type _margin_left10" 
                                    :style="tableModuleToggle[item.moduleName].style"
                                >
                                    {{ tableModuleToggle[item.moduleName].name  }}
                                </div>
                            </div>

                            <div class="income_money" 
                                :class="{
                                    '_gray_color':item.current_rider_order_status === 2,
                                    '_blue_color':item.current_rider_order_status === 3,
                                }"
                            >
                                <div 
                                    class="money_amount_text"
                                    v-if="item.current_rider_order_status !== 3"
                                >
                                    +{{ item.rider_get_all_rebate_yuan }}
                                </div>
                                <div 
                                    class="money_amount_text"
                                    v-else
                                >
                                    {{ item.rider_get_all_rebate_yuan }}
                                </div>
                                <div class="money_text" style="bottom: 2px;">元</div>
                                <div class="gray_tips_text" v-if="item.current_rider_order_status === 2">
                                    (未入账)
                                </div>
                            </div>

                        </div>
                        <div class="it_cont">
                            <div class="left_cont">
                                <div class="left_cont_top cont_item flex flexAlignItems">
                                    <div class="left_cont_icon left_cont_icon1"></div>
                                    <div class="left_cont_text">
                                        茶百道(科教公元π店)
                                    </div>
                                </div>
                                <div class="left_cont_bottom cont_item flex flexAlignItems">
                                    <div class="left_cont_icon left_cont_icon2"></div>
                                    <div class="left_cont_text">
                                        四川轻化工大学(宜宾校区)-C栋
                                    </div>
                                </div>
                            </div>
                            <div class="right_cont">
                                <uni-icons type="right" size="20"></uni-icons>
                            </div>
                        </div>
                        <div class="order_cont">
                            订单编号：54548454518451544512
                        </div>
                        <div 
                            class="success_time order_cont" 
                            style="margin-top:2px"
                            v-if="item.order_end_time!=''&&item.current_rider_order_status!==3"
                        >
                            送达时间：{{ getMoment(item.order_end_time).format(`YYYY-MM-DD HH:mm:ss`) }}
                        </div>
                        <div 
                            class="success_time order_cont" 
                            style="margin-top:2px"
                            v-if="item.current_rider_order_status===3"
                        >
                            转出时间：{{ getMoment(item.turn_order_info.turn_time).format(`YYYY-MM-DD HH:mm:ss`) }}
                        </div>
                    </div>
                </div>

                <div 
                    v-if="typeItemList[checkedIndex].dataList.length===0"
						class="order_empty_box noDataBox"
					>
						<div class="noDataBorder">
							<image src="~@/static/images/nodata.png" class="nodataPic"/>
						</div>
						<div class="noDataTips">
							当前暂无任何相关订单~~
						</div>
					</div>

                <view 
                    class="foot" 
                    style="margin-top: 10px;"
                    v-else
                >
                    <div class="load-more">
                        <uni-load-more 
                            iconType="circle" 
                            :status="typeItemList[checkedIndex].status" 
                            :content-text="loadMoreConfig.text"  
                        />
                    </div>
                </view>

            </div>

        </div>
	</view>
</template>

<script src="./order-statistics.ts" lang="ts"></script>

<style lang="stylus" scoped>
@import './order-statistics.styl';
</style>
